<template>
    <div class="EchartPractice">
        <div ref="main" id="main"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import mapData from '../../../json/map/china.json'// 引入中国地图矢量数据
export default {

    name: "EchartPractice",
    methods: {
        drawChart() {
            let myEchart = echarts.init(this.$refs.main);
            echarts.registerMap('chinaMap', mapData) // 先注册再option的geo
            var option = {
                geo: {
                    type: 'map',// 类型
                    map: 'chinaMap',// 需要和registerMap的第一个参数保持一致
                    roam: true,//设置地图是否可以缩放和拖动
                    label: {
                        show: true,//展示标签

                    },
                    zoom: 1,//设置默认缩放比例
                    center: [102, 30] // （成都） 设置地图中心点，经度纬度
                }
            }

            myEchart.setOption(option);
        }
    },
    mounted() {
        this.drawChart();
        console.log(mapData);
    }
}
</script>

<style scoped>
#main {
    width: 600px;
    height: 400px;
    margin: auto;
    margin-top: 100px
}
</style>

